<template>
  <div class="forget-pwd">
    <el-form ref="forgetPwdForm" :model="form" :rules="rules" class="forget-pwd-form">
      <h3 class="title">重置密码</h3>
      <el-form-item prop="username">
        <el-input v-model="form.username" type="text" auto-complete="off" placeholder="请输入账号">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
        </el-input>
      </el-form-item>
      <el-form-item prop="email">
        <el-input v-model="form.email" type="text" auto-complete="off" placeholder="请输入邮箱">
          <template slot="append">
            <el-button style="color: #409eff; font-size: 75%" @click="getCaptcha(form.email)">
              获取验证码
            </el-button>
          </template>
          <svg-icon slot="prefix" icon-class="email" class="el-input__icon input-icon"/>
        </el-input>
      </el-form-item>
      <el-form-item prop="captcha">
        <el-input v-model="form.captcha" type="text" auto-complete="off" placeholder="请输入验证码">
          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
        </el-input>
      </el-form-item>
      <el-form-item prop="newPwd">
        <el-input v-model="form.newPwd" type="password" auto-complete="off" placeholder="请输入新密码">
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
        </el-input>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-button :loading="loading" size="medium" type="primary" style="width: 100%" @click="resetPwd">
          <span v-if="!loading">重置</span>
          <span v-else>重 置 中...</span>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {resetPassword} from "@/api/login"
  import request from '@/utils/request'

  export default {
    name: "ForgetPwd",
    data() {
      return {
        form: {
          username: "",
          email: "",
          captcha: "",
          newPwd: ""
        },
        rules: {
          username: {
            required: true,
            trigger: "blur",
            message: "请输入您的账号",
          },
          email: {
            type: "email",
            required: true,
            trigger: "blur",
            message: "请输入正确格式的邮箱",
          },
          captcha: {
            required: true,
            trigger: "blur",
            message: "请输入验证码",
          },
          newPwd: {
            required: true,
            trigger: "blur",
            message: "请输入新密码",
          },
        },
        loading: false
      };
    },
    methods: {
      getCaptcha(email) {
        const regEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
        if (!email || !regEmail.test(email)) {
          this.$message.error("请输入正确格式的邮箱")
          return
        }
        new request({
          url: '/captcha?email=' + email,
          method: 'post'
        }).then(() => {
          this.$message.success("验证码已发送，有效期为2分钟，请尽快到邮箱查看")
        });
      },
      resetPwd() {
        this.$refs.forgetPwdForm.validate((valid) => {
          if (valid) {
            this.loading = true;
            resetPassword(this.form).then(() => {
              this.$router.push("/login");
              this.$message.success("重置密码成功")
            }).catch((err) => {
              console.log(err);
              this.loading = false;
            });
          }
        });
      },
    },
  };
</script>

<style rel="stylesheet/scss" lang="scss">
  .forget-pwd {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image: url("../../assets/images/login-background.jpg");
    background-size: cover;
  }

  .title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
  }

  .forget-pwd-form {
    border-radius: 6px;
    background: #ffffff;
    width: 400px;
    padding: 25px 25px 5px 25px;

    .el-input {
      height: 38px;

      input {
        height: 38px;
      }
    }

    .input-icon {
      height: 39px;
      width: 14px;
      margin-left: 2px;
    }
  }
</style>
